import React, { useEffect } from 'react';
import styled from 'styled-components';
import { Settings, AlertCircle, Lock, Server, Database, Shield, LogOut } from 'lucide-react';
import logger from '../../utils/logger';

// 样式组件
const Container = styled.div`
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
`;

const PageTitle = styled.h1`
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 24px;
`;

const SettingsCard = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
`;

const SectionTitle = styled.h2`
  font-size: 18px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
`;

const SettingItem = styled.div`
  padding: 16px 0;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  &:last-child {
    border-bottom: none;
  }
`;

const SettingLabel = styled.span`
  font-size: 14px;
  color: #334155;
  font-weight: 500;
`;

const SettingValue = styled.span`
  font-size: 14px;
  color: #64748b;
`;

const WarningText = styled.div`
  background-color: #fef3c7;
  color: #92400e;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
`;

const SystemSettings = () => {
  // 在实际应用中，这些设置应该从后端获取并可编辑
  const systemSettings = {
    systemVersion: '1.0.0',
    lastBackup: '2023-11-15 02:00:00',
    databaseStatus: 'Connected',
    serverStatus: 'Running',
    maintenanceMode: 'Disabled',
    maxUploadSize: '50MB',
    rateLimit: '100 requests/minute',
    securityLevel: 'High'
  };
  
  useEffect(() => {
    // 记录访问系统设置页面
    logger.info('访问系统设置页面', { securityLevel: '敏感操作' });
  }, []);

  return (
    <Container>
      <PageTitle>系统设置</PageTitle>
      
      <WarningText>
        <AlertCircle size={20} />
        <div>
          <strong>警告：</strong>此页面包含敏感的系统设置。请谨慎操作，不当的修改可能导致系统功能异常。
        </div>
      </WarningText>

      {/* 系统信息卡片 */}
      <SettingsCard>
        <SectionTitle>
          <Server size={20} />
          系统信息
        </SectionTitle>
        <SettingItem>
          <SettingLabel>系统版本</SettingLabel>
          <SettingValue>{systemSettings.systemVersion}</SettingValue>
        </SettingItem>
        <SettingItem>
          <SettingLabel>服务器状态</SettingLabel>
          <SettingValue style={{ color: '#10b981' }}>{systemSettings.serverStatus}</SettingValue>
        </SettingItem>
        <SettingItem>
          <SettingLabel>数据库状态</SettingLabel>
          <SettingValue style={{ color: '#10b981' }}>{systemSettings.databaseStatus}</SettingValue>
        </SettingItem>
        <SettingItem>
          <SettingLabel>最后备份时间</SettingLabel>
          <SettingValue>{systemSettings.lastBackup}</SettingValue>
        </SettingItem>
      </SettingsCard>

      {/* 安全设置卡片 */}
      <SettingsCard>
        <SectionTitle>
          <Shield size={20} />
          安全设置
        </SectionTitle>
        <SettingItem>
          <SettingLabel>安全级别</SettingLabel>
          <SettingValue>{systemSettings.securityLevel}</SettingValue>
        </SettingItem>
        <SettingItem>
          <SettingLabel>维护模式</SettingLabel>
          <SettingValue>{systemSettings.maintenanceMode}</SettingValue>
        </SettingItem>
        <SettingItem>
          <SettingLabel>上传限制</SettingLabel>
          <SettingValue>{systemSettings.maxUploadSize}</SettingValue>
        </SettingItem>
        <SettingItem>
          <SettingLabel>访问频率限制</SettingLabel>
          <SettingValue>{systemSettings.rateLimit}</SettingValue>
        </SettingItem>
      </SettingsCard>
    </Container>
  );
};

export default SystemSettings;